<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <form>
            <p>
                姓名：<input type="text" placeholder="请输入姓名" v-model.lazy="list.usename">
            </p>
            <p>
                年龄：<input type="text" placeholder="请输入年龄" v-model.number="list.age">
            </p>
            <p>
                性别：
                <input type="radio" name="sex" v-model="list.sex" value="男">男
                <input type="radio" name="sex" v-model='list.sex' value="女">女
            </p>
            <p>
                地址：
                <select name="" id="">
                    <option  value="请选择" selected disabled>请选择</option>
                    <option value="" v-for="item in address">{{item}}</option>
                </select>
            </p>
            <div>
                爱好：
                <ul>
                    <li v-for="(item,index) in hobby" :key="index">
                        <input type="checkbox" v-model="list.hobby" :value="item">{{item}}
                    </li>
                </ul>
            </div>
            <p>
                建议：<br>
                <textarea cols="30" rows="10" v-model.trim="list.suggest"></textarea>
            </p>
            {{list}}
            <button @click.prevent="eventclick($event)">提交</button>
        </form>
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                list: {
                    usename: "",
                    age: "",
                    sex: "",
                    hobby: [],
                    address: '',
                    suggest: ""
                },
                address: ["南京", "湖南", "河北", "山东", "山西"],
                hobby: ['跳舞', '唱歌', '足球', '跳舞', '篮球']
            },
            methods: {
                eventclick() {
                    //console.log('hjkh')
                }
            }
        })
    </script>
</body>

</html>